import React, { Component } from "react";
import {
  TouchableOpacity,
  StyleSheet,
  TextInput,
  View,
  Text,
  Alert
} from "react-native";

import { ActivityIndicator } from "@ant-design/react-native";

import NetUtils from "../utils/NetUtils";

export default class LoginScreen extends Component {
  state = {
    isLoging: false
  };

  _onPressLogin = async () => {
    if (!this.state.isLoging) {
      this.setState({
        isLoging: true
      });

      let body = {
        username: this.state.username,
        passwd: this.state.passwd
      };

      let resJson = await NetUtils.Post("https://l.hxyw.org:6063/login", body);

      if (resJson.login === "suss") {
        global.token.username = this.state.username;
        global.token.passwd = this.state.passwd;

        this.props.app.SetLoginSuss();
      } else {
        Alert.alert(
          "提示",
          "您输入的用户名或密码错误！",
          [{ text: "OK", onPress: () => console.log("OK Pressed") }],
          { cancelable: false }
        );

        this.setState({
          isLoging: false
        });
      }
    }
  };

  ButtonRender() {
    if (!this.state.isLoging) {
      return <Text style={styles.btText}>认证</Text>;
    }
    return <ActivityIndicator />;
  }

  render() {
    return (
      <TouchableOpacity activeOpacity={1.0} style={styles.container}>
        <View style={styles.inputBox}>
          <TextInput
            style={styles.input}
            autoCapitalize="none"
            underlineColorAndroid={"transparent"}
            placeholderTextColor={"#ccc"}
            placeholder={"用户名"}
            clearButtonMode="while-editing"
            editable={!this.state.isLoging}
            onChangeText={text => this.setState({ username: text })}
          />
        </View>
        <View style={styles.inputBox}>
          <TextInput
            style={styles.input}
            autoCapitalize="none"
            underlineColorAndroid={"transparent"}
            secureTextEntry={true}
            placeholderTextColor={"#ccc"}
            placeholder={"密码"}
            clearButtonMode="while-editing"
            editable={!this.state.isLoging}
            onChangeText={text => this.setState({ passwd: text })}
          />
        </View>
        <TouchableOpacity style={styles.button} onPress={this._onPressLogin}>
          {this.ButtonRender()}
        </TouchableOpacity>
      </TouchableOpacity>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "black"
  },
  input: {
    width: 200,
    height: 40,
    fontSize: 20,
    color: "black"
  },
  inputBox: {
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
    width: 280,
    height: 50,
    borderRadius: 8,
    backgroundColor: "white",
    marginBottom: 8
  },
  button: {
    height: 50,
    width: 280,
    justifyContent: "center",
    alignItems: "center",
    borderRadius: 8,
    backgroundColor: "#32CD32",
    marginTop: 20
  },
  btText: {
    color: "#fff",
    fontSize: 20
  }
});
